<template>
	<scroll-view :scroll-top="zjcScrollTop" scroll-y class="scroll-view" @scroll="handleScroll">
		<div>
			<div style="position:fixed;right: 1.0em;bottom: 3em;z-index: 100;" @click="toZimu" v-if="showTotop">
				<image src="/static/imgs/totop.png" style="width: 3em;height: 3em;"></image>
			</div>
			<div>
				<image src="/static/imgs/car.png" style="width: 100%;" mode="widthFix"></image>
			</div>
			<div id="targetzimu" style="background-color: #8D8D8D; padding-top: 0.5em;padding-bottom: 0.5em;">
				<div style="margin: 0.5em;border-radius: 0.5em;background-color: #000;padding: 1.0em;">
					<template v-for="(item,index) in zimuList" :key="index">
						<div class="zimuDiv" @click="toTarget(item.zimu)">{{item.zimu}}</div>
					</template>
					<div class="clear"></div>
				</div>

			</div>
			<div style="background-color: #8D8D8D;padding: 0.5em;padding-bottom: 2.5em;">

				<template v-for="(item,index) in zimuList" :key="index">
					<div :id="'target' + item.zimu"
						style="background-color:#000;border-radius: 0.5em;margin-bottom: 0.5em;">
						<div class="zimuTitle">
							<div>{{item.zimu}}</div>
							<div></div>
						</div>
						<div>
							<template v-for="(item,index) in zjclist[index]" :key="index">
								<div class="imgDiv" @click="toChexing(item)">
									<div
										style=" box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);background-color: #fff;border-radius: 0.5em;">
										<image :src="api.getUrl()+item.brPic" style="width: 5em;height: 5em;"></image>
									</div>
									<div
										style="width: 100%;overflow: hidden;height: 1.8em;line-height:1.8em;color: #fff;">
										{{item.brBrand}}
									</div>
								</div>
							</template>
							<div class="clear"></div>
						</div>
					</div>
				</template>

			</div>

		</div>
	</scroll-view>
	<CustomTabbar ref="customTabbar"></CustomTabbar>


</template>

<script setup>
	import CustomTabbar from '@/component/custom-tabbar.vue'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import api from '@/common/httprequest.js'
	import {
		zimuList
	} from './method.js';

	let showTotop = ref(false);
	let zjcScrollTop = ref(0);
	let scrollThrottled = ref(false);
	const handleScroll = (e) => {
		if (!scrollThrottled.value) {
			scrollThrottled.value = true;
			zjcScrollTop.value = e.detail.scrollTop;
			setTimeout(() => {
				scrollThrottled.value = false;
			}, 1500); // 调整延迟时间以适应需求
		}
		showTotop.value = e.detail.scrollTop > 100;
	}

	const toChexing = (item) => {
		uni.redirectTo({
			url: '/offer/cartype?obj=' + JSON.stringify(item)
		})
	}

	//回到顶部-字母列表位置
	const toZimu = () => {
		wx.createSelectorQuery().select('#targetzimu').boundingClientRect(res => {
			if (res) {
				zjcScrollTop.value = res.top;
				//console.log('元素的 top 值:', res.top);
			}
		}).exec();
	}
	//跳转至具体哪个字母
	const toTarget = (zimu) => {
		wx.createSelectorQuery().select('#target' + zimu).boundingClientRect(res => {
			if (res) {
				zjcScrollTop.value = res.top;
				//console.log('元素的 top 值:', res.top);
			}
		}).exec();
	}

	let zjclist = reactive([]);

	const loadData = () => {
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "GET",
			url: "/app/brand/list",
			params: {},
		}).then(res => {
			uni.hideLoading();
			//console.log('resaa', res);
			if (res.code == 200) {
				groupList(res.data)
				//console.log('alist', alist);
				//console.log('blist', blist);
			} else {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '数据查询失败！'
				})
			}

		});
	}

	const groupList = (list) => {
		for (var i = 0; i < zimuList.length; i++) {
			zjclist.push(list.filter(x => {
				return x.brInitial == zimuList[i].zimu
			}));
		}
	}

	onMounted(() => {
		loadData();
	})
</script>

<style scoped>
	.scroll-view {
		height: 100vh;
		overflow-y: scroll;
		box-sizing: border-box;
	}

	.zimuTitle {
		background-color: #D6D6D6;
		padding: 0.5em;
		display: flex;
		justify-content: space-between;
	}

	.zimuDiv {
		width: 1.8em;
		height: 1.8em;
		line-height: 1.8em;
		text-align: center;
		background-color: #D78100;
		color: #fff;
		border-radius: 50%;
		float: left;
		margin-left: 0.75em;
		margin-right: 0.75em;
		font-size: 1.0em;
		margin-bottom: 0.5em;
	}

	.clear {
		clear: both;
	}

	.imgDiv {
		float: left;
		text-align: center;
		width: calc(33.33% - 12px);
		margin: 5px;
		padding: 0.5em;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 0;
		margin-bottom: 0;
	}
</style>